ফর্ম সাবমিশন হ্যান্ডলিং

Web Development - অ্যাঙ্গুলার (Angular) - Angular ফর্মস |

Angular-এ ফর্ম সাবমিশন হ্যান্ডলিং একটি গুরুত্বপূর্ণ প্রক্রিয়া, যেখানে ইউজার ইনপুট সংগ্রহ করে, যাচাই করা হয় এবং তারপর সার্ভারে পাঠানো হয়। Angular দুই ধরনের ফর্ম হ্যান্ডলিং সমর্থন করে:

Template-driven forms
Reactive forms

এখানে আমরা দুইটি পদ্ধতির মধ্যে ফর্ম সাবমিশন হ্যান্ডলিং সম্পর্কে বিস্তারিত আলোচনা করব।

Template-driven Forms

Template-driven forms হলো একটি সরল পদ্ধতি যেখানে ফর্মের লজিক এবং কন্ট্রোলের অধিকাংশ অংশ টেম্পলেটের মধ্যেই থাকে। এতে কম কোড লাগে, এবং এটি ছোট বা সহজ ফর্মের জন্য উপযুক্ত।

Template-driven Form তৈরি

FormModule আমদানি করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

HTML টেম্পলেট:

<form (ngSubmit)="onSubmit()" #userForm="ngForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" ngModel required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" ngModel required>

  <button type="submit" [disabled]="!userForm.form.valid">Submit</button>
</form>

এখানে:

ngSubmit ডিরেক্টিভ ব্যবহার করা হয়েছে ফর্ম সাবমিশনের জন্য।
ngModel ব্যবহার করে ফর্ম ইনপুটের মধ্যে ডেটা বাইন্ডিং করা হচ্ছে।
required ভ্যালিডেশন দেওয়া হয়েছে ইনপুট ফিল্ডে।

কম্পোনেন্ট কোড:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  onSubmit() {
    alert('Form submitted!');
  }
}

এখানে, onSubmit() মেথডটি ফর্মের ডেটা প্রসেস করতে বা সাবমিট করতে ব্যবহৃত হয়।

Reactive Forms

Reactive forms হলো আরও শক্তিশালী এবং ফর্ম লজিকের উপর পূর্ণ নিয়ন্ত্রণ প্রদান করে। এই পদ্ধতিতে ফর্ম কন্ট্রোল এবং ফর্ম গ্রুপগুলো প্রোগ্রামেটিকভাবে কম্পোনেন্টে তৈরি করা হয়, যা বড় এবং জটিল ফর্মের জন্য উপযুক্ত।

Reactive Form তৈরি

ReactiveFormsModule আমদানি করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

কম্পোনেন্ট কোড (Reactive Form):

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
      alert('Form submitted successfully!');
    } else {
      alert('Please fill out all fields correctly.');
    }
  }
}

HTML টেম্পলেট:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input type="text" id="name" formControlName="name">

  <label for="email">Email:</label>
  <input type="email" id="email" formControlName="email">

  <button type="submit" [disabled]="!userForm.valid">Submit</button>
</form>

এখানে:

FormGroup এবং FormControl ব্যবহার করে ফর্ম কন্ট্রোল তৈরি করা হয়েছে।
formControlName ডিরেক্টিভ ব্যবহার করে ফর্ম ইনপুটের সাথে কন্ট্রোল যুক্ত করা হয়েছে।
ফর্মের সাবমিশন কেবল তখনই সম্ভব হবে যখন ফর্মটি ভ্যালিড হবে (userForm.valid)।